<template>
  <view style="background: #f6f6f6; padding: 10px 12px 0 12px; height: 95vh">
    <nut-cell-group>
      <nut-cell title="收货人" :desc="address.consignee_name || '请填写'" is-link @click="showNamePopup = true" />
      <nut-cell title="联系电话" :desc="address.consignee_phone || '请填写'" is-link @click="showPhonePopup = true" />
      <nut-cell title="所在地区" :desc="address.address_name || '请选择地区'" is-link @click="showAddress" />
      <nut-cell title="详细地址" :desc="address.detail || '请填写'" is-link @click="showDetailPopup = true" />
    </nut-cell-group>
    <nut-cell-group>
      <nut-cell title="设置默认地址" sub-title="下单会优先使用该地址">
        <template #link>
          <nut-switch v-model="address.is_default" size="large" />
        </template>
      </nut-cell>
    </nut-cell-group>
    <nut-address
      v-model:visible="showPopup"
      :province="addressList.province"
      :city="addressList.city"
      :country="addressList.country"
      :town="addressList.town"
      custom-address-title="请选择所在地区"
      @change="onChange"
      @close="close"
    ></nut-address>
    <popup-input
      v-if="showNamePopup"
      :value="address.consignee_name"
      required
      :show="showNamePopup"
      @close="showNamePopup = false"
      @commit="handleNamePost"
    />
    <popup-input
      v-if="showPhonePopup"
      :value="address.consignee_phone"
      required
      max-length="11"
      :show="true"
      @close="showPhonePopup = false"
      @commit="handlePhonePost"
    />
    <popup-input
      v-if="showDetailPopup"
      :value="address.detail"
      max-length="24"
      :show="showDetailPopup"
      @close="showDetailPopup = false"
      @commit="handleDetailPost"
    />
    <nut-tabbar safe-area-inset-bottom bottom style="border: none; background-color: #f6f6f6" class="dpr-center-center">
      <nut-button style="width: 95%" type="primary" @click="handleSaveAddress">保存</nut-button>
    </nut-tabbar>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import Taro from '@tarojs/taro';
import PopupInput from '@/components/popup-input/index.vue';
import { saveAddressApi } from '@/api/user';

const address = ref({
  consignee_name: '',
  consignee_phone: '',
  address_id: '',
  address_name: '',
  detail: '',
  is_default: false,
});
const showNamePopup = ref(false);
const showPhonePopup = ref(false);
const showDetailPopup = ref(false);
const handleNamePost = (val) => {
  address.value.consignee_name = val;
  showNamePopup.value = false;
};
const handlePhonePost = (val) => {
  address.value.consignee_phone = val;
  showPhonePopup.value = false;
};
const handleDetailPost = (val) => {
  address.value.detail = val;
  showDetailPopup.value = false;
};

const showPopup = ref(false);
const addressList = ref({
  province: [
    { id: 1, name: '北京' },
    { id: 2, name: '广西' },
    { id: 3, name: '江西' },
    { id: 4, name: '四川' },
  ],
  city: [
    { id: 7, name: '朝阳区' },
    { id: 8, name: '崇文区' },
    { id: 9, name: '昌平区' },
    { id: 6, name: '石景山区' },
  ],
  country: [
    { id: 3, name: '八里庄街道' },
    { id: 9, name: '北苑' },
    { id: 4, name: '常营乡' },
  ],
  town: [{ id: 44, name: '无' }],
});

const handleSaveAddress = () => {
  if (!address.value.consignee_name) {
    Taro.showToast({ title: '请填写收货人', icon: 'error' });
    return;
  }
  if (!address.value.consignee_phone) {
    Taro.showToast({ title: '请填写联系电话', icon: 'error' });
    return;
  }
  if (!address.value.address_id) {
    Taro.showToast({ title: '请选择地区', icon: 'error' });
    return;
  }
  if (!address.value.detail) {
    Taro.showToast({ title: '请填写详细地址', icon: 'error' });
    return;
  }
  saveAddressApi(address.value).then((res) => {
    if (res.success) {
      Taro.showToast({ title: '保存成功', icon: 'success' });
    }
  });
};

const showAddress = () => {
  showPopup.value = !showPopup.value;
};

const onChange = (cal) => {
  console.log('选择了', cal);
};
const close = (val) => {
  console.log(val);
  address.value.address_name = val.data.addressStr;
};
</script>

<style lang="less" scoped></style>
